<template>
  <el-dialog
    v-model="visible"
    :title="`${paramsProps.title}`"
    :destroy-on-close="true"
    width="780px"
    draggable
  >
    <el-form
      ref="ruleFormRef"
      label-width="140px"
      label-suffix=" :"
      :rules="rules"
      :model="paramsProps.row"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="作者id" prop="userId">
        <el-input v-model="paramsProps.row.userId" :precision="0" :min="1" :max="999999" disabled />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select
          v-model="paramsProps.row.categoryId"
          placeholder="请选择分类文章"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in Category"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章缩略图" prop="articleCover">
        <SimplifyUpload dir="article" v-model="paramsProps.row.articleCover"></SimplifyUpload>
      </el-form-item>
      <el-form-item label="文章标题" prop="articleTitle">
        <el-input
          v-model="paramsProps.row.articleTitle"
          placeholder="请填写文章标题"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleContent">
        <el-input
          v-model="paramsProps.row.articleContent"
          placeholder="请填写文章内容"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="类型 (1原创 2转载 3翻译)" prop="articleType" label-width="200px">
        <el-select
          v-model="paramsProps.row.articleType"
          clearable
          placeholder="请选择类型 (1原创 2转载 3翻译)"
        >
        <el-option label="原创" :value="1" />
        <el-option label="转载" :value="2" />
        <el-option label="翻译" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否置顶 (0否 1是)" prop="isTop" label-width="200px">
        <el-select v-model="paramsProps.row.isTop" placeholder="请选择是否置顶">
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否删除 (0否 1是)" prop="isDelete" label-width="200px">
        <el-select v-model="paramsProps.row.isDelete" placeholder="请选择是否删除">
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否推荐 (0否 1是)" prop="isRecommend" label-width="200px">
        <el-select v-model="paramsProps.row.isRecommend" placeholder="请选择是否推荐">
          <el-option label="否" :value="0" />
          <el-option label="是" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态 (1公开 2私密 3评论可见)" prop="status" label-width="250px">
        <el-select
          v-model="paramsProps.row.status"
          clearable
          placeholder="请选择状态 (1公开 2私密 3评论可见)"
        >
        <el-option label="公开" :value="1" />
        <el-option label="私密" :value="2" />
        <el-option label="评论可见" :value="3" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { type ElForm, ElMessage } from 'element-plus'
import { getTCategoryListApi } from '@/api/modules/tcategory/tCategory'
import SimplifyUpload from '@/components/SimplifyUpload/index.vue'
defineOptions({
  name: 'TArticleForm'
})

const rules = reactive({
  userId: [{ required: true, message: '请填写作者id' }],
  categoryId: [{ required: true, message: '请填写分类id' }],
  articleCover: [{ required: true, message: '请填写缩略图' }],
  articleTitle: [{ required: true, message: '请填写文章标题' }],
  articleContent: [{ required: true, message: '请填写文章内容' }],
  articleType: [{ required: true, message: '请填写类型 (1原创 2转载 3翻译)' }],
  isTop: [{ required: true, message: '请填写是否置顶 (0否 1是)' }],
  isDelete: [{ required: true, message: '请填写是否删除 (0否 1是)' }],
  isRecommend: [{ required: true, message: '请填写是否推荐 (0否 1是)' }],
  status: [{ required: true, message: '请填写状态 (1公开 2私密 3评论可见)' }],
  createTime: [{ required: true, message: '请填写发表时间' }]
})

const visible = ref(false)
const paramsProps = ref<View.DefaultParams>({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
})

// 接收父组件传过来的参数
const acceptParams = (params: View.DefaultParams) => {
  paramsProps.value = params
  visible.value = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await paramsProps.value.api!(paramsProps.value.row)
      ElMessage.success({ message: `${paramsProps.value.title}成功！` })
      paramsProps.value.getTableList!()
      visible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

//分类列表
const Category = ref([])

const getCategoryList = async() => {  
  const res = await getTCategoryListApi({})
  console.log(res)
  Category.value =  res.data.rows.map((item: any) => {
    return {
      label: item.categoryName,
      value: item.id
    }
  })
}

onMounted(() => {

  console.log('TArticleForm mounted')
  getCategoryList();
})

defineExpose({
  acceptParams
})

</script>

<style scoped lang="scss"></style>
